<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table style="width:100px; border:5px solid black;" cellspacing="0" cellpadding="0">
    <tr id="tr1">
        <td id="td1">
            <div id="d1" style="float:left; width:200px; height:50px; background:gray;"></div>
        </td>
    </tr>
</table>
<div id="info1"></div>
<br />
<table style="width:100px; border:5px solid black;" cellspacing="0" cellpadding="0">
    <tr id="tr2">
        <td id="td2">
            <div id="d2" style="float:right; width:200px; height:50px; background:gray;"></div>
        </td>
    </tr>
</table>
<div id="info2"></div>
<br />
<table style="width:100px; border:5px solid black;" cellspacing="0" cellpadding="0">
    <tr id="tr3">
        <td id="td3">
            <div id="d3" style="float:left; width:200px; height:50px; background:gray;">&nbsp;</div>
        </td>
    </tr>
</table>
<div id="info3"></div>
<script>
    function $(id) { return document.getElementById(id); }
    $("info1").innerHTML = "TR1:" + $("tr1").offsetWidth + ", TD1:" + $("td1").offsetWidth;
    $("info2").innerHTML = "TR2:" + $("tr2").offsetWidth + ", TD2:" + $("td2").offsetWidth;
    $("info3").innerHTML = "TR3:" + $("tr3").offsetWidth + ", TD3:" + $("td3").offsetWidth;
</script>
</body>
</html>